<template>
	<view class="content">
		<view class="user-center">
			<image class="head" src="https://carching.cd1a.cn/images/mini_program/header.png"></image>
			<image class="image-head" :src="userInfo.avatarurl"></image>
			<view class="head-content">
				<view class="content-text">{{ userInfo.nickname }}</view>
				<view class="content-tel">{{ phone }}</view>
			</view>
			<view class="button" @click="goCash">
				<text>立即充值</text>
			</view>
			<view class="cash">{{ money ? money : 0 }}<text>元</text></view>
		</view>
		<view class="content-list" @click="jumpUrl(item)" v-for="(item, i) in userInfo.content" :key="i">
			<view class="list">
				<image class="left-img" :src="item.imgleft"></image>
				<text>{{ item.text }}</text>
				<image class="right-img" :src="item.imgRight"></image>
			</view>
		</view>
		<!-- 弹出层（扫码成功） -->
		<uni-popup ref="popup" type="dialog">
			<view class="toast-content">
				<view style="font-size: 70rpx">扫码成功</view>
				<view style="font-size: 45rpx">{{ msg }}</view>
				<image class="toast-img" src="https://carching.cd1a.cn/images/mini_program/code.png" mode=""></image>
				<button class="toast-button" @click="scanUrl(url)">确定</button>
			</view>
		</uni-popup>
		<!-- 弹出层（余额不足） -->
		<uni-popup ref="goCharge" type="dialog">
			<view class="charge-content">
				<view style="font-size: 70rpx">无法充电</view>
				<view style="font-size: 45rpx">{{ msg }}</view>
				<image class="toast-img" src="https://carching.cd1a.cn/images/mini_program/dollor.png" mode=""></image>
				<button class="charge-button" @click="scanUrl(url)">去充值</button>
			</view>
		</uni-popup>
		<!-- 弹出层（设备故障） -->
		<uni-popup ref="alert" type="dialog">
			<view class="alert-content">
				<view style="font-size: 70rpx">无法充电</view>
				<view style="font-size: 45rpx">{{ msg }}</view>
				<image class="toast-img" src="https://carching.cd1a.cn/images/mini_program/alert.png" mode=""></image>
				<button class="alert-button" @click="scanUrl(url)">确定</button>
			</view>
		</uni-popup>
		<view class="word-tel" @click="call">
			<text><text>全国服务热线: </text>{{ phoneNumber }}</text>
		</view>
		<button class="bottom-button" v-if="!phone" open-type="getPhoneNumber" withCredentials="true"
			@getphonenumber="getPhoneNumber">
			扫码充电
		</button>
		<button class="bottom-button" v-else @click="scanCode">扫码充电</button>
	</view>
</template>

<script>
	import uniPopup from "../../components/uni-popup/uni-popup.vue"
	import uniPopupMessage from '../../components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '../../components/uni-popup/uni-popup-dialog.vue'
	import {
		post
	} from "../../api/index.js"
	import paths from "../../config/path.js"
	export default {
		components: {
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				userInfo: "",
				phone: "",
				userId: "",
				url: "",
				msg: "",
				money: "",
				phoneNumber: "400 6888 919",
				code: "",
				log_id: "",
				pay: ""
			}
		},
		onLoad(option) {
			console.log(option)
			// 在onload里判断用户是否有授权
			if (uni.getStorageSync("userInfo")) {
				let userData = uni.getStorageSync("userInfo")
				this.userId = userData.userid_locked
				// 如果有授权并且有扫码
				if (option.q != undefined) {
					let uri = decodeURIComponent(option.q)
					uni.setStorageSync('uri', uri)
					this.index_code()
				}
				// 从授权页面跳转过来
				if (option.user_info == "1" || option.pay == "1") {
					this.index_code()
				}
			} else {
				// 如果没有授权并且有扫码
				if (option.q != undefined) {
					let uri = decodeURIComponent(option.q)
					uni.setStorageSync('uri', uri)
					uni.showModal({
						content: "请先登录!!!",
						showCancel: false,
						success: function() {
							uni.redirectTo({
								url: "../register/index?userInfo=" + 1
							})
						}
					})
				} else {
					// 没有授权
					uni.showModal({
						content: "请先登录!!!",
						showCancel: false,
						success: function() {
							uni.redirectTo({
								url: "../register/index"
							})
						}
					})
				}
			}
		},
		created() {
			// 获取首页用户信息的接口
			if (uni.getStorageSync("userInfo")) {
				let userData = uni.getStorageSync("userInfo")
				// 判断用户登录的时候是否有手机号
				this.phone = uni.getStorageSync("phone") ? uni.getStorageSync("phone") : userData.phone
				let url = paths.userInfo
				this.userInfo = userData
				this.userId = userData.userid_locked
				post(url, {
					userid_locked: userData.userid_locked
				}).then(res => {
					// console.log(res)
					// 判断新老用户
					if (res.data.code == "1") {
						this.money = res.data.data.money
						if (res.data.data.code_name) {
							uni.setStorageSync("codeNum", res.data.data.code_name)
						}
						if (res.data.data.log_id) {
							uni.setStorageSync("logId", res.data.data.log_id)
						}
					} else {
						uni.showModal({
							content: res.data.msg,
							showCancel: false,
							success: function() {
								uni.reLaunch({
									url: "../register/index"
								})
							}
						})
					}
				})
			}
		},
		methods: {
			// 外部扫码统一调用的接口
			index_code() {
				let url = paths.code
				post(url, {
					userid_locked: this.userId,
					str: uni.getStorageSync('uri') // 外部扫码地址链接
				}).then(res => {
					console.log(res)
					uni.setStorageSync("codeNum", res.data.data.code_num)
					this.url = res.data.data.url
					this.code = res.data.code
					this.log_id = res.data.data.log_id
					this.msg = res.data.msg
					if (res.data.code == "2") {
						// 扫码成功
						this.$refs.popup.open()
					} else if (res.data.code == "1") {
						// 余额不足
						this.$refs.goCharge.open()
					} else {
						// 设备故障
						this.$refs.alert.open()
					}
				})
			},
			scanCode() {
				// 内部扫码
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					scanType: ["qrCode", "barCode"],
					success: function(res) {
						console.log(res)
						if (
							((res.result.split("//")[1].slice(0, 3) == "car") && (res.result.split("?")[1].slice(0, 1) == "s")) ||
							((res.result.split("//")[1].slice(0, 3) == "car") && (res.result.split("?")[1].slice(0, 1) == "c"))
						) {
							let url = paths.code
							uni.setStorageSync('uri', res.result)
							post(url, {
								userid_locked: that.userId,
								str: res.result
							}).then(res => {
								console.log(res)
								uni.setStorageSync("codeNum", res.data.data.code_num)
								that.url = res.data.data.url
								that.code = res.data.code
								that.log_id = res.data.data.log_id
								that.msg = res.data.msg
								if (res.data.code == "2") {
									// 扫码成功
									this.$refs.popup.open()
								} else if (res.data.code == "1") {
									// 余额不足
									this.$refs.goCharge.open()
								} else {
									// 设备故障
									this.$refs.alert.open()
								}
							})
						} else {
							uni.showModal({
								content: "二维码错误",
								showCancel: false,
							})
						}
					}
				})
			},
			getPhoneNumber(e) {
				let that = this
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					let detail = e.detail
					uni.login({
						success(res) {
							let url = paths.phone
							post(url, {
								iv: detail.iv,
								encryptedData: detail.encryptedData,
								code: res.code
							}).then(res => {
								// console.log(res)
								if (res.data.code == "1") {
									uni.showToast({
										title: "授权成功",
										success: function() {
											uni.setStorageSync("phone", res.data.data)
											that.phone = res.data.data
										}
									})
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: "none"
									})
								}
							})
						}
					})
				} else {
					uni.showModal({
						content: "您拒绝授权,将无法充电,请先授权!!!",
						showCancel: false,
						confirmText: "返回授权"
					})
				}
			},
			goCash() {
				// 支付页面
				uni.navigateTo({
					url: "../payment/index"
				})
			},
			scanUrl(url) {
				if (this.code == '10') {
					// 充电未结束到充电页面
					uni.redirectTo({
						url: url + '&log_id=' + this.log_id
					})
				} else if (this.code == '8') {
					// 上次订单未结算到订单页面
					uni.redirectTo({
						url: url + '?log_id=' + this.log_id
					})
				} else {
					uni.redirectTo({
						url: url + '?need_pay=' + 1
					})
				}
			},
			jumpUrl(item) {
				uni.navigateTo({
					url: item.url
				})
			},
			call() {
				uni.makePhoneCall({
					phoneNumber: this.phoneNumber
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.toast-content,
	.charge-content,
	.alert-content {
		width: 300px;
		height: 380px;
		border-radius: 15px;
		text-align: center;
		letter-spacing: 1px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #ffffff;
	}

	.toast-content {
		background-color: #51cea7;
	}

	.charge-content {
		background-color: #ff5661;
	}

	.alert-content {
		background-color: #fed50a;
	}

	.toast-img {
		width: 150px;
		height: 150px;
		margin: 20px auto;
	}

	.toast-button,
	.charge-button {
		border-radius: 999px;
		background-color: #ffffff;
		width: 240px;
	}

	.toast-button {
		color: #51cea7;
	}

	.charge-button {
		color: #ff5661;
	}

	.alert-button {
		background-color: #333333;
		border-radius: 999px;
		width: 240px;
		color: #fed50a;
	}

	.toast-button:active,
	.charge-button:active,
	.alert-button:active {
		background-color: #cfcfcf;
	}

	.user-center {
		position: relative;
		width: 100%;
	}

	.head {
		position: absolute;
		width: 100%;
		height: 454rpx;
	}

	.image-head {
		position: absolute;
		width: 120rpx;
		height: 120rpx;
		top: 50rpx;
		left: 30rpx;
		border-radius: 120rpx;
	}

	.head-content {
		position: absolute;
		top: 68rpx;
		left: 180rpx;
		color: #ffffff;
	}

	.content-text {
		font-size: 36rpx;
		font-weight: lighter;
	}

	.content-tel {
		font-size: 28rpx;
		font-weight: 500;
	}

	.button {
		position: absolute;
		top: 230rpx;
		left: 520rpx;
		width: 173rpx;
		height: 50rpx;
		border-radius: 999px;
		background-color: #f3d48d;
		text-align: center;
		line-height: 45rpx;
	}

	.bottom-button:active,
	.button:active {
		background-color: #cfcfcf;
	}

	.button>text {
		font-size: 26rpx;
		color: #474245;
	}

	.button>image {
		width: 12rpx;
		height: 14rpx;
	}

	.cash {
		position: absolute;
		top: 300rpx;
		left: 50rpx;
		font-size: 100rpx;
		color: #fbe2a3;
		font-family: cursive;
	}

	.cash>text {
		color: #fbe2a3;
		font-size: 22rpx;
		font-family: none;
	}

	.content-list {
		position: relative;
		width: 100%;
		height: 100rpx;
		top: 500rpx;
		border-bottom: 0.5px solid #c6c6c6;
	}

	.content-list:active {
		background-color: #808080;
	}

	.list {
		position: absolute;
		left: 50rpx;
		top: 25rpx;
	}

	.list>.left-img {
		width: 52rpx;
		height: 52rpx;
		vertical-align: middle;
	}

	.list>text {
		font-size: 28rpx;
		color: #333333;
		letter-spacing: 2px;
		padding-left: 30rpx;
	}

	.list>.right-img {
		width: 24rpx;
		height: 24rpx;
		vertical-align: middle;
		padding-left: 440rpx;
	}

	.word-tel {
		position: relative;
		top: 600rpx;
		text-align: center;
		color: #0da297;
		font-size: 20rpx;
	}

	.bottom-button {
		position: fixed;
		bottom: 0;
		width: 100%;
		letter-spacing: 2px;
		color: #ffffff;
		background-color: #0da297;
		border-radius: 0px;
		height: 145rpx;
	}
</style>
